<template>
    <div>
        <div>子组件：{{obj}}</div>
        <div>{{str}}</div> <!--可以省略obj.xxx-->
        <div>x2：{{x2}}</div> <!--可以省略obj.xxx-->
<!--        {{obj}}-->
        <el-button @click="chufa">子传父方法 和参数</el-button>
        <el-button @click="eventBus" >事件总线传值</el-button>
        <el-button @click="parent($parent)">$parent</el-button>
    </div>
</template>

<script  setup>
    import $bus from "../../../bus/index"
    import {ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, useAttrs, onMounted} from 'vue'
    // const obj = defineProps(['count',"str",'people',"hobby"]) // 父传子
    // obj 是一个大的对象
    onMounted(()=>{


    });
    let $attrs = useAttrs()
    console.log($attrs); // 获取的属性 方法 是不在 defineProps defineEmits中声明过的

    const obj = defineProps({
        count: Number,
        str: {type:String,default:"123456"},
        people: Object,
        hobby: Array,

    })
    const emits = defineEmits(["func","func2"])// 子触发父的方法并携带参数  最好不要写跟原生事件重名的 比如click

    const chufa = ()=>{
        // console.log(obj.str)
        emits('func',123456)
        emits('func2',1234567)
    }
    const x = reactive({a:'a'})
    const x2 = ref(20)


    //定义一个参数暴露给父组件
    // const x2 = 123;
    //定义一个方法暴露给子组件
    const funca = () => {
        console.log("子组件中的方法");

    }
    const xxx = () => {
        console.log("子组件中的方法");

    }
    // v3的事件总线 mitt 的使用
    const eventBus = ()=>{
        $bus.emit("bus","buss")
    }
    const parent =($parent)=>{
        console.log($parent) // 可以获取父组件的 属性并能直接修改
    }
    //将参数a和函数funca暴露给父组件
    defineExpose({
        x2,
        funca
    });

</script>

<style scoped>

</style>